<template>
  <view class="purchase-detail-page">
    <!-- 顶部导航（返回 + 标题） -->
    <view class="top-bar">
      <view class="back-btn" @click="navigateBack">
        <image 
          class="back-icon" 
          src="/static/icons/left.png" 
          mode="widthFix"
        ></image>
      </view>
      <text class="page-title">购买详情</text>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" v-if="loading">
      <text>加载中...</text>
    </view>

    <!-- 错误/空状态 -->
    <view class="empty-state" v-else-if="!detailData || detailData.orderId === undefined">
      <image class="empty-icon" src="/static/empty.png" mode="aspectFit"></image>
      <text class="empty-text">订单详情获取失败</text>
    </view>

    <!-- 付款成功状态（基于接口数据，默认显示付款成功） -->
    <view class="status-section" v-else>
      <image 
        class="success-icon" 
        src="/static/icons/orderSuccess.png" 
        mode="widthFix"
      ></image>
      <text class="status-text">付款成功</text>
    </view>

    <!-- 详情列表（动态渲染接口数据） -->
    <view class="detail-list" v-if="detailData && detailData.orderId !== undefined">
      <view class="detail-item">
        <text class="label">金额</text>
        <text class="value">{{ detailData.amount }}元</text>
      </view>
      <view class="detail-item">
        <text class="label">购买时长</text>
        <text class="value">{{ formatDuration(detailData.buyDuration) }}</text>
      </view>
      <view class="detail-item">
        <text class="label">交易时间</text>
        <text class="value">{{ formatBuyTime(detailData.buyTime) }}</text>
      </view>
      <view class="detail-item">
        <text class="label">交易订单</text>
        <text class="value">{{ detailData.orderNumber }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getOrderInfo } from '@/api/user.js'
export default {
  data() {
    return {
      orderId: null,
      loading: false,
      detailData: {} // 存储接口返回的详情数据
    };
  },
  onLoad(options) {
    // 接收上一页传递的参数（支持两种方式：直接传orderId或传item对象）
    if (options) {
      // 方式1：直接传递orderId（如从购买记录页跳转）
      if (options.orderId) {
        this.orderId = options.orderId;
      } 
      // 方式2：传递item对象（兼容旧跳转逻辑，可选）
      else if (options.item) {
        try {
          const item = JSON.parse(decodeURIComponent(options.item));
          this.orderId = item.orderId;
        } catch (e) {
          console.error('解析item参数失败:', e);
          uni.showToast({ title: '参数错误', icon: 'none' });
          setTimeout(() => uni.navigateBack(), 1000);
          return;
        }
      }
    }

    // 校验orderId，存在则加载详情
    if (this.orderId) {
      this.getOrder();
    } else {
      uni.showToast({ title: '缺少订单ID', icon: 'none' });
      setTimeout(() => uni.navigateBack(), 1000);
    }
  },
  methods: {
    // 获取订单详情接口
    getOrder() {
      this.loading = true;
      getOrderInfo({ orderId: this.orderId })
        .then(res => {
          if (res.code === 200 && res.data && res.data.orderId !== undefined) {
            // 接口成功返回有效数据
            this.detailData = res.data;
          } else {
            uni.showToast({ title: res.msg || '获取详情失败', icon: 'none' });
            this.detailData = {};
          }
        })
        .catch(err => {
          console.error('获取订单详情异常:', err);
          uni.showToast({ title: '网络错误', icon: 'none' });
          this.detailData = {};
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 格式化购买时长（接口返回buyDuration为1.0 → 1个月）
    formatDuration(duration) {
      // 先判断duration存在且为数字
      if (duration === undefined || duration === null || isNaN(duration)) {
        return '未知';
      }
      // 假设duration单位为“月”（根据业务场景调整，如1.0=1个月）
      return `${parseInt(duration, 10)}个月`;
    },

    // 格式化交易时间（接口返回：2025-08-23T03:21:21.000+00:00 → 2025-08-23 03:21:21）
    formatBuyTime(timeStr) {
      if (typeof timeStr !== 'string' || timeStr.length === 0) {
        return '未知时间';
      }
      // 替换T为空格，去除后面的时区信息（如.000+00:00）
      const formattedTime = timeStr.replace('T', ' ').split('.')[0];
      return formattedTime;
    },

    // 返回购买记录页
    navigateBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
/* 页面容器 */
.purchase-detail-page {
  background-color: #fff;
  min-height: 100vh;
}

/* 顶部导航 */
.top-bar {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 15px;
  border-bottom: 1px solid #eee;
  /* 固定导航栏（可选，与购买记录页保持一致） */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #fff;
}
.back-btn {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.back-icon {
  width: 16px;
  height: 16px;
}
.page-title {
  font-size: 17px;
  font-weight: bold;
  color: #333;
  flex: 1;
  text-align: center;
  margin: 0 44px;
}

/* 加载状态 */
.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300rpx;
  color: #999;
  font-size: 16px;
  margin-top: 44px; /* 与导航栏高度一致，避免被遮挡 */
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: #999;
  margin-top: 44px; /* 与导航栏高度一致 */
}
.empty-icon {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  opacity: 0.5;
}
.empty-text {
  font-size: 16px;
}

/* 付款状态 */
.status-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px 0;
  margin-top: 44px; /* 与导航栏高度一致，避免被遮挡 */
}
.success-icon {
  width: 36px;
  height: 36px;
  margin-right: 8px;
}
.status-text {
  font-size: 18px;
  color: #58BE6A; /* 付款成功绿色 */
  font-weight: 500;
}

/* 详情列表 */
.detail-list {
  padding: 0 15px 15px;
}
.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}
.detail-item:last-child {
  border-bottom: none; /* 最后一项移除下划线 */
}
.label {
  font-size: 14px;
  color: #666;
  width: 80px; /* 固定标签宽度，确保对齐 */
}
.value {
  font-size: 14px;
  color: #333;
  text-align: right;
  flex: 1;
  word-break: break-all; /* 处理长订单号换行 */
}
</style>